Im Modul Inhalte strukturieren mit HTML haben wir behandelt, was HTML ist und wie es zur Auszeichnung von Dokumenten verwendet wird. Diese Dokumente können in einem Webbrowser gelesen werden. Überschriften sehen größer aus als normaler Text, Absätze brechen auf eine neue Zeile um und haben Zwischenräume. Links sind farbig und unterstrichen, um sie vom restlichen Text zu unterscheiden.

Was Sie sehen, sind die Standard-Browserstile — sehr grundlegende Stile, die der Browser auf HTML anwendet, um sicherzustellen, dass die Seite grundsätzlich lesbar bleibt, auch wenn kein explizites Styling vom Autor der Seite festgelegt wurde. Diese Stile sind in Standard-CSS-Stilblättern definiert, die im Browser enthalten sind — sie haben nichts mit HTML zu tun.

Das Web wäre ein langweiliger Ort, wenn alle Webseiten so aussähen. Deshalb müssen Sie über CSS lernen.

Mit CSS können Sie genau steuern, wie HTML-Elemente im Browser aussehen und Ihre Dokumente nach Belieben designen und layouten.

• Ein Dokument ist normalerweise eine Textdatei, die mit einer Markup-Sprache strukturiert ist, am häufigsten mit HTML (diese werden als HTML-Dokumente bezeichnet). Sie können auch auf Dokumente stoßen, die in anderen Markup-Sprachen wie SVG oder XML geschrieben sind. Während wir zuvor über Webseiten gesprochen haben, enthält ein HTML-Dokument den Inhalt einer Webseite und legt deren Struktur fest.
• Darstellung eines Dokuments gegenüber einem Benutzer bedeutet, es in eine für das Publikum nutzbare Form zu konvertieren. Browser wie Firefox, Chrome, Safari und Edge sind darauf ausgelegt, Dokumente visuell zu präsentieren, zum Beispiel auf einem Computerbildschirm, Projektor, mobilen Gerät oder Drucker. In einem Webkontext wird dies allgemein als Rendering bezeichnet; wir haben eine vereinfachte Beschreibung des Prozesses bereitgestellt, durch den eine Webseite im Artikel Wie Browser Webseiten laden gerendert wird.

CSS kann für viele Zwecke verwendet werden, die mit dem Aussehen und der Gestaltung Ihrer Webseite zusammenhängen. Die wichtigsten sind:

• Textgestaltung, zum Beispiel zum Ändern der Farbe und der Größe von Überschriften und Links.
• Erstellen von Layouts, zum Beispiel indem ein einzelner Textspaltenlayout in ein Mehrspaltenlayout umgewandelt wird (Hinzufügen über CSS Cookbook: Column Layouts).
• Besondere Effekte wie Animationen.

Die CSS-Sprache ist in Module organisiert, die verwandte Funktionalität enthalten. Schauen Sie sich zum Beispiel die MDN-Referenzseiten für das Modul Hintergründe und Rahmen an, um herauszufinden, was dessen Zweck ist und welche Eigenschaften und Funktionen es enthält. In diesem Modul finden Sie auch einen Link zu den Spezifikationen, die die Technologie definieren.

CSS ist eine regelbasierte Sprache — Sie definieren Regeln, indem Sie Gruppen von Stilen angeben, die auf bestimmte Elemente oder Gruppen von Elementen auf Ihrer Webseite angewendet werden sollen.

Beispielsweise könnten Sie entscheiden, dass die Hauptüberschrift auf Ihrer Seite als großer roter Text gestaltet werden soll. Der folgende Code zeigt eine sehr einfache CSS-Regel, die dies bewirken würde:

h1 {
  color: red;
  font-size: 2.5em;
}

• Im obigen Beispiel beginnt die CSS-Regel mit einem Selektor. Dieser wählt die HTML-Elemente aus, die wir stylen werden. In diesem Fall stylen wir Überschriften der Ebene eins (

  ).

• Dann haben wir eine Menge geschweifter Klammern — { }.
• Die Klammern enthalten eine oder mehrere Deklarationen, die in Form von Eigenschaften- und Werte-Paaren vorliegen. Wir geben die Eigenschaft (zum Beispiel color im obigen Beispiel) vor dem Doppelpunkt an und spezifizieren den Wert der Eigenschaft nach dem Doppelpunkt (red ist der Wert, der für die Eigenschaft color festgelegt wird).
• Dieses Beispiel enthält zwei Deklarationen, eine für color und eine andere für font-size.

Verschiedene CSS-Eigenschaften haben unterschiedliche zulässige Werte. In unserem Beispiel haben wir die color-Eigenschaft, die verschiedene Farbwerte annehmen kann. Wir haben auch die font-size-Eigenschaft. Diese Eigenschaft kann verschiedene Größeneinheiten als Wert annehmen.

Ein CSS-Stylesheet enthält viele solcher Regeln, die nacheinander geschrieben werden.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Sie werden feststellen, dass Sie sich schnell einige Werte merken, während Sie andere nachschlagen müssen. Die individuellen Eigenschaftsseiten auf MDN bieten Ihnen eine schnelle Möglichkeit, Eigenschaften und ihre Werte nachzuschlagen.

Wie im Artikel Wie Browser Webseiten laden erklärt, erhält der Browser beim Navigieren zu einer Webseite zuerst das HTML-Dokument, das den Inhalt der Webseite enthält, und wandelt es in einen DOM-Baum um.

Danach werden alle in der Webseite gefundenen CSS-Regeln (entweder direkt im HTML eingefügt oder in verknüpfter externer .css-Dateien) in verschiedene "Behälter" sortiert, basierend auf den verschiedenen Elementen, auf die sie angewendet werden (wie durch ihre Selektoren angegeben). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was zu einem Renderbaum führt, der dann im Browserfenster gerendert wird.

Lassen Sie uns ein Beispiel ansehen. Zunächst definieren wir einen HTML-Ausschnitt, auf den das CSS angewendet werden könnte:

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

Nun unser CSS, wiederholt aus dem vorherigen Abschnitt:

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Dieses CSS:

• Wählt alle <h1>-Elemente auf der Seite aus, färbt ihren Text rot und macht sie größer als ihre Standardgröße. Da es in unserem Beispiel-HTML nur ein <h1> gibt, wird nur dieses Element das Styling erhalten.
• Wählt alle <p>-Elemente auf der Seite aus und gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe sowie einigen Abstand um den Text. In unserem Beispiel-HTML gibt es zwei <p>-Elemente und beide erhalten das Styling.

Wenn das CSS auf das HTML angewendet wird, ist die gerenderte Ausgabe wie folgt:

Jetzt, da Sie ein gewisses Verständnis dafür haben, was CSS ist und wie es funktioniert, lassen Sie uns dazu übergehen, Ihnen einige Übungen zu geben, damit Sie selbst CSS schreiben und die Syntax genauer erklären können.

• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter